<template>
	<view style="padding-bottom: 140rpx;">
		<view class="tab-content">
			<!-- <u-sticky :z-index="1000"> -->
				<view class="nav">
					<uni-nav-bar fixed leftIcon="left" :border="false" @clickLeft="back" backgroundColor="#F5F7F8"
						title="导出中心">
					</uni-nav-bar>
					<u-tabs :list="typelist" :show-bar="false" :is-scroll="false" :current="current"
						@change="change"></u-tabs>
				</view>
				
			<!-- </u-sticky> -->
			<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption">
				<view class="withdraw-list box-content">
					<view class="each-withdraw" @click.stop="todetail(item)" v-for="(item,index) in list" :key="index">
						<view class="left-content">
							<view class="left-title">技师提现记录</view>
							<view>
								<view class="start">
									<view class="btn" :style="{backgroundColor:item.status == 1?'#3393FF':''}">起</view>
									<view class="">
										{{item.start_time}}
									</view>
								</view>
								<view class="lines"></view>
								<view class="start">
									<view class="btn" :style="{backgroundColor:item.status == 1?'#FF0000':''}">止</view>
									<view class="">
										{{item.end_time}}
									</view>
								</view>
							</view>
						</view>
						<view class="right-content" v-if="item.status == 2" @click="resend(item)">
							<view class="btn" >
								重新发送
							</view>
						</view>
					</view>
				</view>
			</mescroll-body>
		</view>
		<u-modal v-model="show1" show-cancel-button  title="是否驳回?" @confirm="feedback1">
			<view class="slot-content">
				<input type="text" v-model="check_content" placeholder="输入驳回理由"/>
			</view>
		</u-modal>
		<u-modal v-model="show2" show-cancel-button	@confirm="feedback2" :content="content"></u-modal>
		<u-calendar v-model="showC" mode="range"   @change="changeCalendar"></u-calendar>

	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				typelist: [{
					name: '生成中'
				}, {
					name: '已生成'
				}],
				current: 0,
				downOption: {
					auto: false
				},
				list: [],
				isall: false,
				show1: false,
				show2:false,//
				content: "",
				showC:false,
				mode: 'range',
				check_content:"",
				ids:""
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			change(e) {
				this.current = e
				this.downCallback()
			},
			changeCheck() {
				this.isall = !this.isall
				if (this.isall) {
					this.list.map(item => {
						item.checked = true
					})
				} else {
					this.list.map(item => {
						item.checked = false
					})
				}
			},
			resend(item){
				let that = this
				this.request.httpTokenRequest({
					url: "store.order/sendEms",
					method: "get"
				}, {
					id:item.id
				}).then(res => {
					if (res.code == 0) {
						that.$util.msg(res.msg)
					} else {
						that.$util.msg(res.msg)
						return
					}
				}, error => {
					
				})
			},
			downCallback() {
				this.list = []
				this.mescroll.resetUpScroll();
			},
			/*上拉加载的回调*/
			upCallback(page) {
				let that = this
				this.request.httpTokenRequest({
					url: "store.order/getUploadLog",
					method: "get"
				}, {
					status: this.current+1,
					page:page.num
				}).then(res => {
					if (res.code == 0) {
						res.data.data.map(item => {
							item.checked = false
							that.list.push(item)
						})
						that.mescroll.endSuccess(that.list.length)
					} else {
						that.$util.msg(res.msg)
						return
					}
				}, error => {
					that.mescroll.endErr();
				})
			}
		},
		onLoad() {
			this.isshow = true
		}
	}
</script>

<style lang="scss">
	.nav{
		padding-top: var(--status-bar-height);
		background-color: #F5F7F8;
		position: sticky;
		top: 0;
		z-index: 99;
	}
	.uni-navbar__header-btns .uni-navbar__header-btns-right {
		width: 180rpx !important;
	}
	.uni-navbar__header-btns-right {
		width: 180rpx !important;
	}
	.daochu {
		// display: flex;
		// align-items: center;
		// font-size: 30rpx;
		// font-family: PingFangSC, PingFang SC;
		// font-weight: 400;
		// color: #8F8F8F;
		// width: 180rpx !important;

		// image {
		// 	width: 32rpx;
		// 	height: 30rpx;
		// 	flex: 0 0 auto;
		// }
	}

	//
	.each-withdraw {
		display: flex;
		align-items: center;
		padding: 30rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 4rpx 4rpx rgba(232, 232, 232, 0.5);
		border-radius: 20rpx;
		margin-top: 20rpx;
		position: relative;
		.left-content{
			.left-title{
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #000000;
				line-height: 42rpx;
				margin-bottom: 24rpx;
			}
			.start{
				display: flex;
				align-items: center;
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #8E8E8E;
				.btn{
					width: 30rpx;
					height: 30rpx;
					background: #A4A4A4;
					font-size: 18rpx;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 30rpx;
					text-align: center;
					border-radius: 50%;
					margin-right: 13rpx;
				}
			}
			.lines{
				width: 1rpx;
				height: 22rpx;
				background-color: #D7D7D7;
				margin-left: 15rpx;
			}
		}

		.right-content {
			position: absolute;
			bottom: 32rpx;
			right: 32rpx;
			.btn{
				text-align: center;
				line-height: 68rpx;
				width: 183rpx;
				height: 68rpx;
				background: #3393FF;
				border-radius: 34rpx;
				text-align: center;
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				
			}
			
		}
	}

	.fixed-bottom {
		display: flex;
		align-items: center;
		height: 120rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 0 30rpx;
		z-index: 99;
		.all-choose {
			display: flex;
			align-items: center;
			font-size: 30rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #0F0807;
			line-height: 42rpx;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 11rpx;
			}
		}

		.btn {
			width: 200rpx;
			height: 68rpx;
			border-radius: 34rpx;
			border: 1rpx solid #949494;
			text-align: center;
			line-height: 68rpx;
		}

		.bohui {
			margin-left: 176rpx;
		}

		.affirm {
			margin-left: auto;
			background: #3393FF;
			border: 0;
			color: #FFFFFF;
		}
	}
	//
	.slot-content{
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30rpx;
		input{
			font-size: 28rpx;
			height: 60rpx;
			text-align: center;
			
		}
	}
</style>